import Vue from 'vue'
import Router from 'vue-router'
import About from '@/views/About'
import Layout from '@/components/Layout'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/About'
        },
        {
            path: '/About',
            name: 'About',
            component: About
        },
        {
            path: '/Detail/:id',
            name: 'Detail',
            // 开启 props， 会把 URL 中的参数传递给组件
            // 在组件中通过 props 来接收 URL 参数
            props: true,
            component: () => import(/* webpackChunkName: "Detail" */'@/views/Detail') // 异步组件（代码分隔）
        }, 
        {
            path: '/Layout',
            component: Layout,
            children: [
                {
                    path: '',
                    component: About
                }
            ]
        }
    ]
})